<template>
  <div class="header-wrapper">
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" style="margin-left:2%"><i class="el-icon-menu"></i><router-link to="/home">首页</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/news">新闻</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="/system">预测分析系统</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="/store">方案库</router-link></el-menu-item>
      <el-menu-item index="5"><router-link to="/questionaire">问卷调查</router-link></el-menu-item>
        <el-menu-item index="6" v-if="!isLogin" style="position:absolute;right:50px"><router-link to="/login">登录</router-link></el-menu-item>
        <el-menu-item index="7" v-if="!isLogin" style="position:absolute;right:150px"><router-link to="/login">注册</router-link></el-menu-item>
        <el-submenu index="8" v-if="isLogin" style="position:absolute;right:150px">
          <template slot="user">tesla</template>
          <el-menu-item index="8-1">我的信息</el-menu-item>
          <el-menu-item index="8-2">我的方案</el-menu-item>
          <el-menu-item index="8-3" @click="logout">注销登录</el-menu-item>
        </el-submenu>
        <span class="username" v-if="isLogin" style="position:absolute;right:100px">{{user}}</span>        
    </el-menu>
  </div>
</template>

<script>
import store from '../store'
export default {
  data(){
    return{
      activeIndex:'1',
      user:'tesla'
    }
  },
  computed:{
    isLogin(){
      return store.state.isLogin;
    }
  },
  methods:{
    logout(){
      store.commit('LOGOUT');
    }
  }
}
</script>

<style>
.header-wrapper{
  position: fixed;
  widows: 100%;
  right: 0;
  left: 0;
  z-index: 1500;
}
.el-menu-item{
  font-size: 20px;
}
  .el-menu--horizontal {
    border-right: none;
    border-bottom: solid 1px #545c64;
}
.username{
  font-size: 20px;
  margin-top: 5px;
  color: antiquewhite;
  line-height: 60px;
}
*{
  text-decoration: none;
}
</style>
